<template>
  <div>
    <nav class="swiper">
      <div class="swiper-container" v-if="bannerlist.length">
        <div class="swiper-wrapper">
          <div class="swiper-slide food_types_container" @click="gotourl(item.LoadUrl)" v-for="(item, index) in bannerlist" :key="index">
            <img :src="item.BannerImg">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <img src="../../images/fl.svg" class="fl_back animation_opactiy" v-else>
    </nav>
    <div class="box">
      <div class="innerBox flexCenter">
        <span>
          <span class="iconfont icon-jifen blue"></span>
          <span class="integral blue">剩余积分</span>
          <span class="num blue">{{statistics.AvailableIntegral}}</span>
        </span>
        <span class="fen">|</span>
        <span>
          <span class="iconfont icon-lipin blue"></span>
          <router-link :to="{path: '/integralIndex'}"><span class="record blue">兑换记录</span> </router-link>
        </span>
      </div>
    </div>
    <div :class="{'NewItemList':cssIndex==1,'itemList':cssIndex==2}">
      <div class="changeCss flexCenter">
        <!--<span :class="{'cssActive':cssIndex==1}"  @click="changeCss(1)" class="iconfont icon-liebiao"></span>-->
        <span>热门商品</span>
        <!--<span :class="{'cssActive':cssIndex==2}" @click="changeCss(2)" class="iconfont icon-liebiao1"></span>-->
      </div>
      <ul v-infinite-scroll="getgiftlist" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <router-link :to="{path: '/giftDetail',query:{id:item.Id}}" v-for="(item,index) in giftlist" :key="index"
                     tag='li'>
          <div class="img-con">
            <img v-lazy='item.GiftImg' alt="">
          </div>
          <div class="gift-info">
            <div>
              {{item.GiftName}}
              <span style="float: right;font-size: 0.51rem;color: #999;">库存:{{item.StockNum}}</span>
            </div>
            <div class="flexBetween">
              <span>{{item.IntegralValue}}<span>积分</span></span>
              <span>价值{{item.GiftMarketPrice}}元</span>
            </div>
          </div>
        </router-link>
      </ul>


      <div class="bottom-line flexCenter">
        <span></span>
        <span>我是有底线的哦</span>
        <span></span>
      </div>
    </div>
    <foot-guide></foot-guide>
  </div>
</template>

<script>
  import footGuide from 'src/components/footer/footGuide'
  import 'src/plugins/swiper.min.js'
  import 'src/style/swiper.min.css'
  import {getStore} from '../../config/mUtils'
  import {InfiniteScroll, Toast,Lazyload} from 'mint-ui';

  export default {
    data() {
      return {
        bannerlist: [],
        integral: 3000,
        giftlist: [],
        pageindex: 1,
        bottomLine: false,
        userInfo: {},
        statistics: {},
        loading: false,
        cssIndex:1,
      }
    },
    components: {
      footGuide
    },
    computed: {},
    methods: {
      changeCss(index){
        this.cssIndex=index;
      },
      bindbanner() {
        this.$axios.get('integral.banner.getlist', {
          params: {
            eid: this.userInfo.EnterpriseId,
          }
        }).then((p) => {
          this.bannerlist = p.data.result;
          //当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧;初始化swiper
          this.$nextTick(function () {
            new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              loop: true,
              autoplay: 3000
            });
          })

        })
      },
      getgiftlist() {
        this.$axios.get('integral.gift.getlist', {
          params: {
            eid: this.userInfo.EnterpriseId,
            typeid: 0,
            rec: true,
            pageindex: this.pageindex,
            pagesize: 5
          }
        }).then((p) => {
          
          if (this.pageindex <= p.data.result.TotalPageCount) {
            this.loading = false;//可以加载
            this.pageindex++;
            this.giftlist = this.giftlist.concat(p.data.result.PageData);
          } else {
            this.loading = true;//不可以加载
            Toast({
              message: '没有数据啦',
              duration: 1500
            });
          }
        })
      },
       gotourl(url) {
         if(url){
             window.location ="http://"+url;
         }
      },
      //获取统计信息
      getStatistics() {
        this.$axios.get('the.integral.statistics', {
          params: {
            InuserId: this.userInfo.Id,
            eid: this.userInfo.EnterpriseId,
            UserType:this.userInfo.UserType
          }
        }).then((p) => {
          this.statistics = p.data.result;
        })
      }
    },
    created() {
      this.userInfo = getStore("userInfo");

    },
    mounted() {
      this.userInfo = getStore('userInfo');
      this.bindbanner();
      this.getStatistics();
    },
  }
</script>
<style lang="scss" scoped>
  @import 'src/style/mixin';

  .changeCss {
    padding: 0.43rem .695652rem;
    /*span:nth-child(1),span:nth-child(3){*/
      /*font-size: 1rem;*/
      /*color: #666666;*/
    /*}*/
    span:nth-child(1){
      font-size: 0.68rem;
      color: #666666;
    }
  }

  .swiper-slide {
    img {
      max-width: 100%;
      height: 8.695652rem;
      animation: show-car .5s;
      transition: left .6s,top .6s;
      transition-delay: 1s;
    }
  }

  .box {
    display: flex;
    justify-content: center;
    margin-top: -0.652174rem;

    .innerBox {
      background-color: white;
      width: 13.565217rem;
      height: 2.608696rem;
      border-radius: .217391rem;
      z-index: 2;

      .icon-jifen {
        width: .913043rem;
        height: 1.130435rem;
      }

      .integral {
        font-size: .521739rem;
      }

      .num {
        font-size: .869565rem;
      }

      .icon-lipin {
        width: 1.086957rem;
        height: 1.173913rem;
      }

      .record {
        font-size: .782609rem;
      }

      .fen {
        color: #EEE;
        margin: 0 .652174rem;
      }
    }
  }

  .itemList {
    padding: .73913rem 0 2.652174rem;

    ul {
      padding: 0 .695652rem;
      column-count: 2;
      list-style: none;
      column-gap: 0.85rem;
      column-rule: 1px dashed #E7EAED;
      li {
        padding-top: .434783rem;
        background-color: white;
        border-bottom: 0.85rem solid #F5F5F5;
        break-inside: avoid; //避免文本块分解成单独的列
        img {
          width: 100%;
          animation: show-car .5s;
          transition: left .6s,top .6s;
          transition-delay: 1s;
        }

        .gift-info {
          padding: 0 .434783rem .434783rem;

          div:nth-child(1) {
            margin-bottom: .217391rem;
            font-size: .608696rem;
            font-weight: 700;
            color: #101010;
          }

          div:nth-child(2) {
            span:nth-child(1) {
              font-size: .782609rem;
              font-weight: 700;
              color: #FB5D57;
              span {
                font-size: .521739rem;
                color: #999;
                font-weight: 400;
                padding-left: .217391rem;
              }
            }
            span:nth-child(2) {
              font-size: 0.51rem;
              color: #999;
            }
          }
        }
      }
    }
  }

  .NewItemList {
    padding: .73913rem 0 2.652174rem;
    ul {
      list-style: none;
      li {
        background: white;
        padding: 0.43rem 0.43rem 0.43rem 0;
        margin-bottom: 0.43rem;
        display: flex;
        align-items: center;

        .img-con {
          width: 4.26rem;
          height: 4.26rem;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 0.21rem;
          img {
            max-width: 4.05rem;
            max-height: 4.26rem;
            animation: show-car .5s;
            transition: left .6s,top .6s;
            transition-delay: 1s;
            border-radius: 0.17rem;
          }
        }
        .gift-info {
          flex: 1;
          padding-left: 0.43rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 2.56rem;

          div:nth-child(1) {
            font-size: 0.60rem;
            font-weight: 700;
            color: #101010;
          }

          div:nth-child(2) {
            span:nth-child(1) {
              font-size: .782609rem;
              font-weight: 700;
              color: #FB5D57;
              span {
                font-size: .521739rem;
                color: #999;
                font-weight: 400;
                padding-left: .217391rem;
              }
            }
            span:nth-child(2) {
              font-size: 0.51rem;
              color: #999;
            }
          }
        }


      }
    }
  }


  .bottom-line {
    margin-top: 0.65rem;

    span:nth-child(1), span:nth-child(3) {
      width: 2.13rem;
      height: 1px;
      background: #E7EAED;
      margin: 0 0.6rem;
    }

    span:nth-child(2) {
      font-size: 0.51rem;
      color: #999;
    }
  }

  .cssActive{
    color: #FB5D57!important;
  }

  @keyframes show-car{
    0% {
      transform: scale(.3);
    }
    100% {
      transform: scale(1);
    }

  }
</style>
